<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<meta name="viewport" content="width=device-width,init-scaleble=1.0">
	<title></title>
	<style type="text/css">
		*{padding:0;margin:0;box-sizing: border-box;}
		ul,li,ol{list-style: none;}
		.title{
			font-size:1.4rem;
			background-image: linear-gradient(45deg, red, blue);
        	background-clip:text;
        	-webkit-background-clip: text;
        	color: transparent;
        	text-align: center;
        	margin:20px 0;
		}
		.list{
			margin-top:50px;	
		}
		.list li{
			margin-bottom:10px;
			font-size:1.2rem;
			padding-left:30%;
		}
		.list li img{
			margin-right:.5rem;
			vertical-align: middle;
		}
		button{
			outline:none;
			border:none;
			border-radius: .5rem;
			background: #43a251;
			color:#FFFFFF;
			padding:10px 2rem;
			display: block;
			margin:1.5rem auto;
			letter-spacing: .1rem;

		}
		.mast{
			position: fixed;
			top:0;left:0;
			width:100%;height: 100%;
			background: rgba(255,255,255,.6);
			display: none;

		}
		.mast_box{
			position:absolute;
			top:50%;left:50%;
			transform: translate(-50%,-50%);
			width:60%;height:400px;
			padding:10px;
			background:#FFFFFF;
			border:1px solid #efefef;
			border-radius: 10px;
		}
		.mast_box img{
			display: block;
			margin:0 auto;
			width:80%;
			height: 360px;
		}
	</style>
</head>
<body>
<div id="id1">
	<p class="title">这里是hc商城</p>
	<ul class="list" >
		<li><img src="img/2.png" /> 父女之友</li>
		<li><img src="img/3.png" />读者</li>
		<li><img src="img/4.png" />青年文摘</li>
		<li><img src="img/5.png" />意林</li>
	</ul>
	<button id="btn">保存为图片</button>
	<a href=""></a>
</div>
<div id="id2">

</div>
<div class="mast">
	<div class="mast_box">
		<img id="show"/>
	</div>
</div>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(function(){
 	$("#btn").click(function(){
 		//$("img").attr("crossOrigin","anonymous");
 		html2canvas(document.getElementById("id1"),{
 			allowTaint:true
 		}).then((canvas) => {
		/* 此处的base64ImgSrc就是得到的img的base64字符串，直接在页面上显示即可 */
		//let base64ImgSrc = canvas.toDataURL("image/png");
		// //document.getElementById("id2").appendChild(canvas);
		// $("#show").attr("src",base64ImgSrc);
		 $('#id2').append(canvas);

})

 	})
 })

  



</script>
</body>
</html>